<template>
  <div>
    <!-- 轮播图区域 -->
    <Swiper :sonlunbotuList="lunbotuList" :isfull="true"></Swiper>

    <!-- 六宫格 -->
     <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist">
              <img src="../../images/menu1.png" alt="">
              <div class="mui-media-body">新闻资讯</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photolist">
              <img src="../../images/menu2.png" alt="">
              <div class="mui-media-body">图片分享</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist">
              <img src="../../images/menu3.png" alt="">
              <div class="mui-media-body">商品购买</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
              <img src="../../images/menu4.png" alt="">
              <div class="mui-media-body">留言反馈</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
              <img src="../../images/menu5.png" alt="">
              <div class="mui-media-body">视频专区</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
              <img src="../../images/menu6.png" alt="">
              <div class="mui-media-body">联系我们</div></a></li>
    
    </ul> 


   
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import Swiper from '../subcomponents/swiper.vue'

export default {
  data() {
    return {
      lunbotuList: [] //保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      //获取轮播图数据的方法
      /*   this.$http.get("http://vue.study.io/api/getlunbo").then(result=>{
        // console.log(result.body);
        if(result.body.status === 0){
          // 成功了
          this.lunbotuList = result.body.message;
           Toast('加载轮播图成功！！！');
        }else{
          //失败了
          Toast('加载轮播图失败！！！');
        }
      }) */
      // 模拟数据
      var obj1 = {
        img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg",
        url: "http://www.baidu.com"
      };
      var obj2 = {
        img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner2.jpg",
        url: "http://www.qq.com"
      };
      this.lunbotuList.push(obj1);
      this.lunbotuList.push(obj2);
    }
  },
  components:{
    Swiper
  }
};
</script>

<style lang="scss" scoped>

/* 六宫格ul样式 */
.mui-grid-view.mui-grid-9{
  background-color: #fff;
  border:none;
  img{
    width: 60px;
    height: 60px;
  }
   .mui-media-body{
      font-size: 13px;
    }
}
/* 六宫格 ul li样式 */
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border: none;
}
</style>

